<!--  -->
<template>
  <div class="car">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <div class="main jjgd" >
      <div class="itemcp" v-for="item in gwqd111" :key="item.product_id">
        <van-checkbox v-model="item.checked" @change="gbclick(item)">
          <van-card
        
          :price="item.price.toFixed(2)"
          
          :title="item.name"
          :thumb="item.cover"
          @click.stop
        >
         
          <template #num>
           <van-stepper v-model="item.count"  @change="xzslgwqd(item)"/>
            <van-tag type="danger" size="large" @click="scsp(item)">删除</van-tag>
          </template>
        </van-card>
        </van-checkbox>
        
      </div>
    </div>

    <van-submit-bar :price="jiszjg*100" button-text="提交订单" @submit="qurendingdan">
      <span>共计{{jisshl}}件</span>
    </van-submit-bar>
  </div>
</template>

<script>
import { qqgwcqd ,addgouwuce1,scqdsp} from "network/api.js";
import lsccshujzhu from "@/utll/strong/strong.js";
export default {
  name: "car",
  data() {
    return {
      
      gwqd111:[]
    };
  },

  computed: {
    jisshl(){
      if(!this.gwqd111) {
       
        
        return 0}
      return this.gwqd111.reduce((pre,item)=>{
        if(item.checked) return pre+item.count
        return pre
      },0)
    },
    jiszjg(){
    if(!this.gwqd111) {return 0}
    return this.gwqd111.reduce((pre,item)=>{
      if(item.checked) return pre+item.count*item.price
      return pre
    },0)
  }
  },
  

  methods: {
    //确认定单
    qurendingdan(){
      const gggggg=[]
      this.gwqd111.forEach(item=>{
        if(item.checked){
          let{count,cover,name ,price ,product_id:id}=item  
          gggggg.push({count,cover,name ,price ,product_id:id})
        }
      })
       
      lsccshujzhu.set('spxinxi',gggggg)
      this.$router.push("/orderdd")
    },
    async qqgwcqd1(){
      
      const {data}=await qqgwcqd()
      
      console.log(data)
      this.gwqd111=data
    },
    async xzslgwqd(item){
      await addgouwuce1({product_id:item.product_id,count:item.count})
    },
    async gbclick(item){
      let {product_id,checked}=item
      checked=checked ? 1 : 0
      await addgouwuce1({product_id,checked})
    },
  async scsp(item){

     
      let {product_id}=item

     await scqdsp({product_id})
     console.log(product_id)
     this.gwqd111=this.gwqd111.filter(item=>item.product_id!=product_id)
     console.log(this.gwqd111)
   

    }
  },
  created(){
    this.qqgwcqd1()
  }

};
</script>
<style lang='less' scoped>
.main{
  padding: 5px 5px 0 5px;
  .itemcp{
    // width: 355px;
    height: 122px;
    box-shadow: 0 0 0 2px rgba(100,100,100,.3);
    margin-top:7px;
    
    .van-card{
      width: 318.75px;
      height: 108px;
      margin: 7px 0 0 -3px;
      background: #fff;
    }
  }
}
  
</style>